<template>
  <div class="hierarchical-nav-system">
    <!-- 顶部导航栏 -->
    <div class="top-nav-bar">
      <div class="nav-brand">
        <el-icon><Grid /></el-icon>
        <span>ERP系统</span>
      </div>
      
      <div class="nav-modules">
        <div
          v-for="module in topModules"
          :key="module.id"
          class="nav-module"
          :class="{ 'active': activeTopModule === module.id }"
          @click="selectTopModule(module)"
        >
          <el-icon><component :is="module.icon" /></el-icon>
          <span>{{ module.name }}</span>
          <el-badge v-if="module.count" :value="module.count" class="module-badge" />
        </div>
      </div>

      <div class="nav-actions">
        <el-button text @click="toggleSearch">
          <el-icon><Search /></el-icon>
        </el-button>
        <el-button text @click="toggleNotifications">
          <el-icon><Bell /></el-icon>
          <el-badge :value="3" class="notification-badge" />
        </el-button>
        <el-button text @click="toggleUserMenu">
          <el-icon><User /></el-icon>
        </el-button>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左侧功能树 -->
      <div class="function-tree" :class="{ 'collapsed': isTreeCollapsed }">
        <div class="tree-header">
          <h3>{{ activeTopModuleName }}</h3>
          <el-button text @click="toggleTree">
            <el-icon><component :is="isTreeCollapsed ? 'Expand' : 'Fold'" /></el-icon>
          </el-button>
        </div>
        
        <div class="tree-content">
          <el-tree
            ref="functionTreeRef"
            :data="functionTreeData"
            :props="treeProps"
            :expand-on-click-node="false"
            :highlight-current="true"
            node-key="id"
            @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <div class="tree-node">
                <el-icon v-if="data.icon"><component :is="data.icon" /></el-icon>
                <span class="node-label">{{ node.label }}</span>
                <el-tag v-if="data.badge" size="small" :type="data.badgeType">
                  {{ data.badge }}
                </el-tag>
                <el-badge v-if="data.count" :value="data.count" class="node-badge" />
              </div>
            </template>
          </el-tree>
        </div>
      </div>

      <!-- 中间内容区域 -->
      <div class="content-area">
        <!-- 面包屑导航 -->
        <div class="breadcrumb-bar">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="crumb in breadcrumbs" :key="crumb.path">
              <el-icon v-if="crumb.icon"><component :is="crumb.icon" /></el-icon>
              {{ crumb.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <!-- 功能面板 -->
        <div class="function-panels">
          <div
            v-for="panel in functionPanels"
            :key="panel.id"
            class="function-panel"
            :class="{ 'active': activePanel === panel.id }"
            @click="selectPanel(panel)"
          >
            <div class="panel-header">
              <el-icon><component :is="panel.icon" /></el-icon>
              <h4>{{ panel.title }}</h4>
              <el-tag v-if="panel.badge" size="small" :type="panel.badgeType">
                {{ panel.badge }}
              </el-tag>
            </div>
            <div class="panel-content">
              <p>{{ panel.description }}</p>
              <div class="panel-actions">
                <el-button size="small" type="primary" @click.stop="openFunction(panel)">
                  进入
                </el-button>
                <el-button size="small" @click.stop="addToFavorites(panel)">
                  <el-icon><Star /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 页面内容 -->
        <div class="page-content">
          <router-view v-slot="{ Component }">
            <transition name="page-fade" mode="out-in">
              <component :is="Component" v-if="Component" :key="$route.fullPath" />
            </transition>
          </router-view>
        </div>
      </div>

      <!-- 右侧快速操作 -->
      <div class="quick-actions" :class="{ 'collapsed': isQuickActionsCollapsed }">
        <div class="actions-header">
          <h3>快速操作</h3>
          <el-button text @click="toggleQuickActions">
            <el-icon><component :is="isQuickActionsCollapsed ? 'Expand' : 'Fold'" /></el-icon>
          </el-button>
        </div>
        
        <div class="actions-content">
          <div class="action-group">
            <h4>常用功能</h4>
            <div
              v-for="action in quickActions"
              :key="action.id"
              class="action-item"
              @click="executeAction(action)"
            >
              <el-icon><component :is="action.icon" /></el-icon>
              <span>{{ action.name }}</span>
            </div>
          </div>

          <div class="action-group">
            <h4>最近使用</h4>
            <div
              v-for="recent in recentActions"
              :key="recent.id"
              class="action-item"
              @click="executeAction(recent)"
            >
              <el-icon><component :is="recent.icon" /></el-icon>
              <span>{{ recent.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索面板 -->
    <transition name="search-slide">
      <div v-if="showSearch" class="search-panel">
        <div class="search-header">
          <el-input
            v-model="searchQuery"
            placeholder="搜索功能、数据、操作..."
            @input="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button text @click="closeSearch">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
        <div class="search-results">
          <div
            v-for="result in searchResults"
            :key="result.id"
            class="search-result"
            @click="selectSearchResult(result)"
          >
            <el-icon><component :is="result.icon" /></el-icon>
            <div class="result-content">
              <div class="result-title">{{ result.title }}</div>
              <div class="result-desc">{{ result.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Grid, Search, Bell, User, Star, Close, Expand, Fold,
  Files, ShoppingBag, ShoppingCart, Warehouse, Money, Store,
  UserFilled, DataBoard, Setting, Key, Document, List
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 响应式数据
const activeTopModule = ref('sales')
const isTreeCollapsed = ref(false)
const isQuickActionsCollapsed = ref(false)
const showSearch = ref(false)
const searchQuery = ref('')
const activePanel = ref('')
const functionTreeRef = ref(null)

// 顶部模块数据
const topModules = ref([
  { id: 'sales', name: '销售管理', icon: 'ShoppingCart', count: 5 },
  { id: 'purchase', name: '采购管理', icon: 'ShoppingBag', count: 3 },
  { id: 'inventory', name: '库存管理', icon: 'Warehouse', count: 8 },
  { id: 'finance', name: '财务管理', icon: 'Money', count: 2 },
  { id: 'hr', name: '人力资源', icon: 'UserFilled', count: 0 },
  { id: 'system', name: '系统管理', icon: 'Setting', count: 1 }
])

// 功能树数据
const functionTreeData = ref([
  {
    id: 'sales-orders',
    label: '销售订单',
    icon: 'Document',
    children: [
      { id: 'order-list', label: '订单列表', icon: 'List' },
      { id: 'order-create', label: '新建订单', icon: 'Plus' },
      { id: 'order-approval', label: '订单审批', icon: 'Check' }
    ]
  },
  {
    id: 'sales-customers',
    label: '客户管理',
    icon: 'User',
    children: [
      { id: 'customer-list', label: '客户列表', icon: 'List' },
      { id: 'customer-analysis', label: '客户分析', icon: 'TrendCharts' }
    ]
  }
])

// 功能面板数据
const functionPanels = ref([
  {
    id: 'sales-dashboard',
    title: '销售概览',
    description: '查看销售数据统计和分析',
    icon: 'DataBoard',
    badge: 'HOT',
    badgeType: 'danger'
  },
  {
    id: 'order-management',
    title: '订单管理',
    description: '处理销售订单的完整流程',
    icon: 'Document',
    badge: 'NEW',
    badgeType: 'success'
  }
])

// 快速操作数据
const quickActions = ref([
  { id: 'new-order', name: '新建订单', icon: 'Plus' },
  { id: 'view-inventory', name: '查看库存', icon: 'Box' },
  { id: 'customer-search', name: '客户查询', icon: 'Search' },
  { id: 'financial-report', name: '财务报表', icon: 'TrendCharts' }
])

// 最近操作数据
const recentActions = ref([
  { id: 'recent-1', name: '销售订单 #12345', icon: 'Document' },
  { id: 'recent-2', name: '客户信息 - 张三', icon: 'User' },
  { id: 'recent-3', name: '库存盘点', icon: 'List' }
])

// 搜索相关
const searchResults = ref([])

// 计算属性
const activeTopModuleName = computed(() => {
  const module = topModules.value.find(m => m.id === activeTopModule.value)
  return module?.name || ''
})

const breadcrumbs = computed(() => {
  return [
    { name: '首页', path: '/', icon: 'HomeFilled' },
    { name: activeTopModuleName.value, path: `/${activeTopModule.value}`, icon: 'Grid' }
  ]
})

const treeProps = {
  children: 'children',
  label: 'label'
}

// 方法
const selectTopModule = (module) => {
  activeTopModule.value = module.id
  // 更新功能树数据
  updateFunctionTree(module.id)
}

const updateFunctionTree = (moduleId) => {
  // 根据模块ID更新功能树数据
  const moduleData = {
    sales: [
      {
        id: 'sales-orders',
        label: '销售订单',
        icon: 'Document',
        children: [
          { id: 'order-list', label: '订单列表', icon: 'List' },
          { id: 'order-create', label: '新建订单', icon: 'Plus' }
        ]
      }
    ],
    purchase: [
      {
        id: 'purchase-orders',
        label: '采购订单',
        icon: 'Document',
        children: [
          { id: 'purchase-list', label: '采购列表', icon: 'List' },
          { id: 'supplier-management', label: '供应商管理', icon: 'Shop' }
        ]
      }
    ]
  }
  
  functionTreeData.value = moduleData[moduleId] || []
}

const handleNodeClick = (data) => {
  console.log('点击节点:', data)
  // 处理节点点击事件
}

const selectPanel = (panel) => {
  activePanel.value = panel.id
}

const openFunction = (panel) => {
  console.log('打开功能:', panel)
  // 打开功能页面
}

const addToFavorites = (panel) => {
  ElMessage.success(`已添加到收藏: ${panel.title}`)
}

const executeAction = (action) => {
  console.log('执行操作:', action)
  // 执行快速操作
}

const toggleTree = () => {
  isTreeCollapsed.value = !isTreeCollapsed.value
}

const toggleQuickActions = () => {
  isQuickActionsCollapsed.value = !isQuickActionsCollapsed.value
}

const toggleSearch = () => {
  showSearch.value = !showSearch.value
}

const closeSearch = () => {
  showSearch.value = false
  searchQuery.value = ''
}

const handleSearch = () => {
  if (!searchQuery.value.trim()) {
    searchResults.value = []
    return
  }
  
  // 模拟搜索
  searchResults.value = [
    {
      id: 'search-1',
      title: '销售订单管理',
      description: '处理销售订单的完整流程',
      icon: 'Document'
    },
    {
      id: 'search-2',
      title: '客户信息查询',
      description: '查询和管理客户信息',
      icon: 'User'
    }
  ]
}

const selectSearchResult = (result) => {
  console.log('选择搜索结果:', result)
  closeSearch()
}

// 生命周期
onMounted(() => {
  updateFunctionTree(activeTopModule.value)
})
</script>

<style scoped>
.hierarchical-nav-system {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

/* 顶部导航栏 */
.top-nav-bar {
  height: 60px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
}

.nav-modules {
  flex: 1;
  display: flex;
  gap: 8px;
}

.nav-module {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.nav-module:hover {
  background: #f5f7fa;
}

.nav-module.active {
  background: #409eff;
  color: white;
}

.module-badge {
  margin-left: 4px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧功能树 */
.function-tree {
  width: 280px;
  background: white;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.function-tree.collapsed {
  width: 0;
  border-right: none;
}

.tree-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
}

.tree-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.tree-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.node-label {
  flex: 1;
}

.node-badge {
  margin-left: auto;
}

/* 中间内容区域 */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.breadcrumb-bar {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
}

.function-panels {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  background: #f5f7fa;
}

.function-panel {
  background: white;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.function-panel:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.function-panel.active {
  border-color: #409eff;
  background: #ecf5ff;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.panel-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.panel-content p {
  margin: 0 0 16px 0;
  color: #606266;
  line-height: 1.5;
}

.panel-actions {
  display: flex;
  gap: 8px;
}

.page-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: white;
}

/* 右侧快速操作 */
.quick-actions {
  width: 260px;
  background: white;
  border-left: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.quick-actions.collapsed {
  width: 0;
  border-left: none;
}

.actions-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
}

.actions-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.actions-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.action-group {
  margin-bottom: 24px;
}

.action-group h4 {
  margin: 0 0 12px 0;
  font-size: 12px;
  color: #909399;
  font-weight: 600;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-bottom: 4px;
}

.action-item:hover {
  background: #f5f7fa;
}

/* 搜索面板 */
.search-panel {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  height: 400px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.search-header {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #e4e7ed;
  gap: 12px;
}

.search-results {
  flex: 1;
  padding: 16px 20px;
  overflow-y: auto;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-bottom: 8px;
}

.search-result:hover {
  background: #f5f7fa;
}

.result-content {
  flex: 1;
}

.result-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.result-desc {
  font-size: 12px;
  color: #909399;
}

/* 动画 */
.page-fade-enter-active,
.page-fade-leave-active {
  transition: all 0.3s ease;
}

.page-fade-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.page-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.search-slide-enter-active,
.search-slide-leave-active {
  transition: all 0.3s ease;
}

.search-slide-enter-from {
  transform: translateY(-100%);
}

.search-slide-leave-to {
  transform: translateY(-100%);
}

/* 响应式 */
@media (max-width: 1200px) {
  .quick-actions {
    width: 200px;
  }
  
  .function-tree {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .nav-modules {
    display: none;
  }
  
  .function-tree,
  .quick-actions {
    position: fixed;
    top: 60px;
    height: calc(100vh - 60px);
    z-index: 999;
  }
  
  .function-tree {
    left: 0;
  }
  
  .quick-actions {
    right: 0;
  }
}
</style>
